<template>
    <el-container class="container">
        <el-aside width="200px">Aside</el-aside>
        <el-main>
            <div class="user-box" v-if="!loginType">
                <h3>注册</h3>
                <el-form :inline="true" :rules="rules" label-position="top" label-width="80px" :model="register" ref="register" size="mini">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="register.username" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="userpwd">
                        <el-input v-model="register.userpwd" ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="realname">
                        <el-input v-model="register.realname" ></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号码" prop="Idcard">
                        <el-input v-model="register.Idcard" ></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="tel">
                        <el-input v-model="register.tel" ></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="register.email" ></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="register.sex" label="nan">男</el-radio>
                        <el-radio v-model="register.sex" label="nv">女</el-radio>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('register',0)">用户注册</el-button>
                        <el-button type="primary" @click="onSubmit('register',1)">管理员注册</el-button>
                        <el-button @click="resetForm('register')">取消</el-button>
                        <el-button type="primary" @click="loginType=true">已有账号?点击登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="user-box" v-if="loginType">
              <h3>登录</h3>
              <el-form :inline="true" :rules="rules" label-position="top" label-width="80px" :model="login" ref="login" size="mini">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="login.username" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="login.password" ></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('login',0,true)">登录</el-button>
                    <el-button type="primary" @click="loginType=false">注册</el-button>
                    <el-button @click="resetForm('login')">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
        </el-main>
    </el-container>
</template>
<script>
export default {
  data() {
    return {
      register: {
        usertype: "0",
        username: "",
        userpwd: "",
        realname: "",
        sex: "nan",
        Idcard: "",
        tel: "",
        email: ""
      },
      login: {
        username:"",
        password:""
      },
      rules: {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        userpwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        realname: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        Idcard: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        tel: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
      },
      loginType:false
    };
  },
  mounted() {
    // this.$store.dispatch("handleRegister",this.register);
  },
  methods: {
    onSubmit(formName, type,login) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            // alert('submit')
          if(login){
            this.$store.dispatch("handleLogin", this.login);
          }else{
            this.register.usertype = type;
            this.$store.dispatch("handleRegister", this.register);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  // line-height: 200px;
}

.el-main {
  //   background-color: #e9eef3;
  //   color: #333;
  //   text-align: center;
  // line-height: 160px;
}
.user-box {
  width: 50%;
  height: 400px;
  margin: 0 auto;
}
</style>
